<template>
  <div class="page-dataset-info">
    <!-- content block -->
    <div class="content">
      <!-- search toolbar -->
      <div class="search-bar-box">
        <span>用户名:</span>
        <a-select
          class="username-select"
          placeholder="请输入用户名搜索..."
          show-search
          allow-clear
          @search="searchUserName"
          @change="changeUserName"
        >
          <a-select-option
            v-for="option in memberOptions"
            :key="option.id"
            :value="option.name"
          >
            {{ option.name }}
          </a-select-option>
        </a-select>
        <span>操作时间:</span>
        <a-range-picker
          class="date-picker"
          :show-time="{ format: 'HH:mm:ss' }"
          format="YYYY-MM-DD HH:mm:ss"
          :placeholder="['开始时间', '结束时间']"
          @change="changeDate"
        />
        <span>操作类型:</span>
        <a-select
          default-value="ALL"
          class="operation-select"
          @change="changeOperationType"
        >
          <a-select-option
            v-for="option in operationTypes"
            :key="option.key"
            :value="option.key"
          >
            {{ option.name }}
          </a-select-option>
        </a-select>
        <a-button icon="search" @click="onSearchBtnClick">查询</a-button>
      </div>
      <!-- table -->
      <div class="table-box">
        <a-table
          :columns="tableColumns"
          :data-source="tableData"
          :row-key="(record) => `${record.id}-${record.requestTime}`"
          :loading="loading"
          :pagination="pagination"
          @change="onTableChange"
        >
        </a-table>
      </div>
    </div>
  </div>
</template>
<script lang="ts">
import { queryInfoByName } from '@/api/user'
import { debounce } from 'lodash'
import { Vue, Component } from 'vue-property-decorator'
import AuditStore from '@/store/modules/audit'

@Component
export default class VisitHistory extends Vue {
  public currentUser: any = ''

  private currentDate: any = []

  private currentOperation: any = 'ALL'

  private loading: boolean = false

  private tableColumns = [
    {
      title: '#',
      dataIndex: 'id',
      key: 'id',
      width: '5%',
    },
    {
      title: '用户名',
      dataIndex: 'username',
      key: 'username',
      width: '10%',
      ellipsis: true,
    },
    {
      title: '请求时间',
      dataIndex: 'requestTime',
      key: 'requestTime',
      width: '15%',
      ellipsis: true,
    },
    {
      title: 'URL',
      dataIndex: 'url',
      key: 'url',
      width: '15%',
      ellipsis: true,
    },
    {
      title: '参数',
      dataIndex: 'params',
      key: 'params',
      width: '15%',
      ellipsis: true,
    },
    {
      title: '操作类型',
      dataIndex: 'requestType',
      key: 'requestType',
      width: '10%',
      ellipsis: true,
    },
    // {
    //   title: '请求IP',
    //   dataIndex: 'ip',
    //   key: 'ip',
    //   width: '10%',
    //   ellipsis: true,
    // },
    {
      title: '其他信息',
      dataIndex: 'envInfo',
      key: 'envInfo',
      width: '15%',
      ellipsis: true,
    },
    {
      title: '审计时间',
      dataIndex: 'createTime',
      key: 'createTime',
      width: '15%',
      ellipsis: true,
    },
  ]

  private pagination: any = {}

  // 数据
  private tableData: any[] = []

  // 模糊搜索的用户
  private memberOptions: any[] = []

  private operationTypes: any[] = [
    { name: '所有', key: 'ALL' },
    { name: '查询', key: 'QUERY' },
    { name: '添加', key: 'ADD' },
    { name: '删除', key: 'DELETE' },
    { name: '认证', key: 'AUTH' },
    { name: '导入', key: 'IMPORT' },
    { name: '其他', key: 'OTHER' },
  ]

  // 选择用户
  public changeUserName(value: string) {
    this.currentUser = value
  }

  // 关键字 模糊搜索用户
  public searchUserName(searchKey: string) {
    if (searchKey.trim().length >= 2) {
      this.queryUsersByName(searchKey.trim())
    }
  }
  // 防抖
  private queryUsersByName = debounce(
    (searchKey: string) => this._handleSearch(searchKey),
    100
  )

  public _handleSearch(searchKey: string) {
    const parameters = {
      name: searchKey,
    }
    queryInfoByName({ data: parameters })?.then((response: any) => {
      if (response.data.code === 100) {
        this.memberOptions = response.data.result
      }
    })
  }

  public changeDate(date: any, dateString: any) {
    this.currentDate = dateString
  }

  public changeOperationType(value: string) {
    this.currentOperation = value
  }

  public mounted() {
    this.queryTableData()
  }

  /**
   * 查询 api
   */
  public queryTableData() {
    this.loading = true
    const parameters = {
      curPage: this.pagination.current ? this.pagination.current : 1,
      pageSize: 10,
      username: this.currentUser ? this.currentUser : null,
      startTime:
        this.currentDate && this.currentDate[0] ? this.currentDate[0] : null,
      endTime:
        this.currentDate && this.currentDate[1] ? this.currentDate[1] : null,
      requestType:
        this.currentOperation === 'ALL' ? null : this.currentOperation,
    }
    AuditStore.getVisitHistory(parameters)?.then((response: any) => {
      if (response.data.code === 100) {
        const pagination = { ...this.pagination }
        pagination.total = response.data.result.total
        this.tableData = response.data.result.list
        this.pagination = pagination
      }
      this.loading = false
    })
  }

  /* 点击查询 */
  public onSearchBtnClick() {
    this.pagination.current = 1
    this.queryTableData()
  }

  // eslint-disable-next-line
  public onTableChange(pagination: any, filters: any, sorter: any) {
    this.pagination = pagination
    this.queryTableData()
  }
}
</script>
<style lang="less" scoped>
.page-dataset-info {
  background: #f0f2f5;
  box-sizing: border-box;
  display: block;
  height: 100%;
  padding: 12px 16px;
  width: 100%;

  .content {
    background: #fff;
    box-sizing: border-box;
    display: flex;
    flex-flow: column nowrap;
    height: 100%;
    padding: 18px;
    width: 100%;
  }

  .search-bar-box {
    display: block;
    min-height: 48px;
    padding-bottom: 18px;
    width: 100%;
  }

  .username-select {
    margin-left: 10px;
    margin-right: 20px;
    width: 190px;
  }

  .date-picker {
    margin-left: 10px;
    margin-right: 20px;
    width: 200px;
  }

  .operation-select {
    margin-left: 10px;
    margin-right: 20px;
    width: 100px;
  }
}

.table-box {
  overflow: auto;
}
</style>
